/*
 * @Author: xielikang
 * @Date: 2021-09-30 10:03:42
 * @Purpose: 组件
 * @Last Modified by: xielikang
 * @Last Modified time: 2022-07-31 15:26:28
 */

// 标题
.title {
  position: relative;
  font-weight: bolder;
  text-align: center;
  padding: 50px 0;

  &::after {
    content: '';
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    margin: auto;
    width: 50px;
    height: 3px;
    background-color: var(--color-primary);
  }
}

// 表格
.table {
  font-size: 12px;

  &__th,
  &__tr {
    display: flex;
  }

  &__th {
    background-color: var(--color-border);
    font-weight: bolder;
  }

  &__td {
    @extend .flex-center;
    display: flex;
    flex: 1 0;
    min-height: 35px;
    padding: 10px;
    word-break: break-all;
  }

  &--border {
    @extend .bd;

    &__th,
    &__tr {
      &:not(:last-child) {
        .table__td {
          @extend .bd-bottom;
        }
      }
    }

    &__td {
      &:not(:last-child) {
        @extend .bd-right;
      }
    }
  }

  &--stripe {
    &__tr {
      &:nth-child(2n) {
        background-color: var(--color-bg);
      }
    }
  }
}

// 横向滚动列表
.scroll-x {
  white-space: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory; // 滚动完毕后，让子元素拥有一个停靠的边界（强制停靠）

  &__item {
    display: inline-block;
    scroll-snap-align: center; // 父元素滚动完毕后，子元素停靠在左侧

    &:not(:last-child) {
      margin-right: 15px;
    }
  }
}

// 数据列表
.list {
  &--border {
    .list__item {
      &:not(:last-child) {
        @extend .bd-bottom;
      }
    }
  }

  // 底部边距列表
  &--mb-10 {
    .list__item {
      &:not(:last-child) {
        @extend .mb-10;
      }
    }
  }

  &--mb-15 {
    .list__item {
      &:not(:last-child) {
        @extend .mb-15;
      }
    }
  }
}
